<template>
	<view class="app_Cont pointsContainer">
		<view class="showCont" v-if="showCont">
			<view class="headCont">
				<view class="userCont">
					<view class="userHeadImg">
						<image :src="formData.head_img" ></image>
					</view>
					<view class="userHeadName">
						<view>Hi，{{formData.name}}</view>
						<view class="userDes">累计提现：{{formData.ljtx}} 元</view>
					</view>
				</view>
				<view class="shareCont">
					<view class="cardCont">
						<view class="cardItem" >
							<view class="cardName">累计佣金</view>
							<view class="cardNum">{{formData.ljyj}}</view>
							
						</view>
						<view class="cardItem" >
							<view class="cardName">待到账</view>
							<view class="cardNum">{{formData.ddz}}</view>
						</view>
						<view class="cardItem">
							<view class="cardName">可提佣金</view>
							<view class="cardNum">{{formData.ktyj}}</view>
						</view>
					</view>
				</view>
				<view class="subForm">
					<view class="sureBtn" @click="computMoneyFn">申请全部提现</view>
				</view>
			</view>
			<view class="pointsCont">
				<view class="pointHead">提现记录</view>
				<view class="pointsList">
					<view class="workItem"  :key="index" v-for="(item,index) in listArr">
						<view class="workHead">
							<view class="workNum">提现单号：{{item.withdrawal_number}}</view>
							<view class="workMoney">
								<text class="blueText" v-if="item.status==1">待审核</text>
								<text  class="greenText"  v-if="item.status ==2">已打款</text>
								<text class="redText" v-if="item.status==3">已驳回</text>
							</view>
						</view>
						<view class="workInfo">
							<view class="workInfoLeft">
								<view class="infoItem">
									<view class="infoName">申请时间：</view>
									<view class="infoText">{{item.create_time}}</view>
								</view>
								<view class="infoItem">
									<view class="infoName">审核时间：</view>
									<view class="infoText">{{item.examine_time}}</view>
								</view>
								<view class="infoItem" v-if="item.status==3">
									<view class="infoName">驳回原因：</view>
									<view class="infoText">{{item.bh_reason}}</view>
								</view>
							</view>
							<view class="workInfoPoints" v-if="item.status==1||item.status==2">
								<text>-{{item.commission}}</text>
							</view>
							<view class="workInfoPoints_red" v-if="item.status==3">
								<text>+{{item.commission}}</text>
							</view>
						</view>
					</view>
					<noData v-if="listArr.length==0"></noData>
				</view>
			</view>
			<loadMore v-if="listArr.length>0"></loadMore>
		</view>
		<tabBar></tabBar>
		<u-modal :confirmText="sureText" @cancel="showModal = false" :closeOnClickOverlay="true" :showCancelButton="showCancelButton" :show="showModal" title="操作提示" @confirm="modalSure"  :content='modalCont'></u-modal>
		<subLoad v-if="showSub"></subLoad>
		<load v-if="!showCont"></load>
	</view>
</template>

<script>
	import subLoad from '@/components/sub.vue'
	import load from '@/components/load.vue'
	import loadMore from '@/components/loadMore.vue'
	import noData from '@/components/noData.vue'
	import api from '@/http/api.js'
	import tabBar from '@/components/shareBar.vue'
	export default {
		components:{subLoad,load,noData,tabBar,loadMore},
		data() {
			return {
				showCont:false,
				showSub:false,
				formData:{},
				listArr:[],
				page:1,
				per_page:1000,
				last_page:0,
				sureText:'',
				showModal:false,
				showCancelButton:false,
				modalCont:'',
				modalType:1,
			};
		},
		methods:{
			modalSure(){
				this.showModal = false
				if(this.modalType ==2){
					this.showSub = true
					api.getRequst({},'/api/Task/withdrawal').then((res)=>{
						if(res.code==1){
							uni.showToast({
								title: '申请成功',
								icon: 'success'
							});
							this.getData()
							this.getRecord()
						}
						this.showSub = false
					})
				}else if(this.modalType ==1){
					uni.navigateTo({
						url: '../trainShare'
					});
				}
			},
			computMoneyFn(){
				if(parseInt(this.formData.ktyj)==0){
					this.showModal = true
					this.showCancelButton=  true
					this.modalType = 1
					this.sureText = '去完成'
					this.modalCont = '当前无佣金可提现，完成佣金任务可得佣金'
				}else{
					this.showModal = true
					this.modalType = 2
					this.showCancelButton = true
					this.sureText = '确认提现'
					this.modalCont = '预计1-3个工作日到账此微信账户'
				}
			},
			getData(){
				api.getRequst({},'/api/Task/yjtxShow').then((res)=>{
					if(res.code==1){
						this.formData = res.data
					}
					this.showCont = true
				})
			},
			getRecord(){
				let data = {
					page:this.page,
					per_page:this.per_page,
				}
				api.getRequst(data,'/api/Task/withdrawalRecord').then((res)=>{
					if(res.code==1){
						this.listArr = res.data.data
						this.last_page = res.data.last_page
					}
					this.showCont = true
					
				})
			}
		},
		async onLoad() {
			await this.getData()
			this.getRecord()
		}
	}
</script>

<style lang="less">
.showCont{
	min-height: 100vh;
	padding: 30rpx 4% 140rpx;
	box-sizing: border-box;
	.headCont{
		background-color: #fff;
		padding: 30rpx 4% 15rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		margin-bottom: 30rpx;
		.userCont{
			display: flex;
			align-items: center;
			.userHeadImg{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 4rpx solid #3f55cc;
				box-sizing: border-box;
				background-color: #fff;
				padding: 5rpx;
				
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.userHeadName{
				margin-left: 40rpx;
				font-size: 32rpx;
				font-weight: bold;
				box-sizing: border-box;
				.userDes{
					font-size: 24rpx;
					font-weight: normal;
					color: #eb5f2a;
				}
			}
		}
		.shareCont{
			width: 100%;
			margin: 50rpx auto;
			border-radius: 10rpx;
			box-sizing: border-box;
			.cardCont{
				display: flex;
				justify-content: space-between;
				.cardItem{
					text-align: center;
					width: 34%;
					.cardNum{
						font-size: 40rpx;
					}
					.cardName{
						font-size: 26rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}
		.subForm{
			margin-top: 40rpx;
			padding-bottom: 20rpx;
			.subTitle{
				font-weight: bold;
				padding-top: 20rpx;
			}
			.formItem{
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				background-color: #f8f8f8;
				padding: 25rpx 50rpx;
				box-sizing: border-box;
				border-radius: 50rpx;
				.inputName {
				  width: 140rpx;
				  position: relative;
				  font-size: 28rpx;
				  .mustIcon {
					font-size: 28rpx;
					top: 0;
					left: -16rpx;
					position: absolute;
					color: #ff5757;
				  }
				}
				.inputValue{
					flex: 1;
					width: 100rpx;
				}
			}
			.sureBtn{
				width: 100%;
				padding: 25rpx 0;
				text-align: center;
				background-image: linear-gradient(to right , #ff9b3d, #eb5f2a);
				color: #fff;
				font-size: 26rpx;
				letter-spacing: 4rpx;
				border-radius: 100rpx;
				margin-top: 40rpx;
			}
			.subDes{
				font-size: 24rpx;
				color: #666;
				margin-top: 30rpx;
				.linkText{
					color: #eb5f2a;
				}
			}
		}
	}
	.pointsCont{
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx 4%;
		background-color: #fff;
		box-sizing:  border-box;
		padding-top: 30rpx;
		.pointHead{
			font-weight: bold;
		}
		.pointsList{
			width: 100%;
			.workItem{
				background-color: #fff;
				padding: 30rpx 4% 20rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				.workHead{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.workNum{
						width: 100rpx;
						flex: 1;
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-right: 30rpx;
						margin-bottom: 10rpx;
					}
					.workMoney{
						font-size: 24rpx;
					}
				}
				
				.workInfo{
					display: flex;
					align-items: center;
					.workInfoLeft{
						flex: 1;
						margin-right: 20rpx;
						width: 100rpx;
						.workName{
							font-size: 28rpx;
							font-weight: bold;
							margin: 15rpx 0;
						}
						.infoItem{
							display: flex;
							align-items: center;
							margin-bottom: 15rpx;
							.infoName{
								width: 130rpx;
								margin-right: 15rpx;
								color: #666;
							}
							.infoText{
								flex: 1;
								width: 100rpx;
								.redText{
									color: #ff5757;
								}
							}
							
						}
					}
					.workInfoPoints,.workInfoPoints_red{
						display: flex;
						align-items: center;
						color: #3f55cc;
						font-size: 30rpx;
						.iconfont{
							margin-right: 15rpx;
						}
					}
					.workInfoPoints_red{
						color: #ff5757;
					}
				}
			}
		}
	}
}
.tipMask{
	padding: 30rpx;
	image{
		width: 100%;
	}
	.tipName{
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}
	.tipNum{
		color: #3f55cc;
		font-size: 30rpx;
		text-align: center;
		margin-top: 30rpx;
	}
	.tipDes{
		font-size: 24rpx;
		color: #666;
		margin-top: 20rpx;
		max-height: 800rpx;
		overflow-y: auto;
	}
	.saveBtn{
		width: 100%;
		padding: 30rpx 0;
		box-sizing: border-box;
		margin-top: 40rpx;
		text-align: center;
		background-image: linear-gradient(to right bottom,#a3bffe,#3f55cc);
		color: #fff;
		border-radius: 50rpx;
		font-size: 22rpx;
	}
}
.formCont{
	padding: 30rpx 4%;
	width: 100%;
	box-sizing: border-box;
	.formHead{
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}
	.formMoney{
		text-align: center;
		margin: 30rpx 0;
		color: #3f55cc;
		.moneyText{
			font-size: 40rpx;
			margin-right: 5rpx;
		}
	}
	.formItem{
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		background-color: #f8f8f8;
		padding: 25rpx 50rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		.inputName {
		  width: 140rpx;
		  position: relative;
		  font-size: 28rpx;
		  .mustIcon {
			font-size: 28rpx;
			top: 0;
			left: -16rpx;
			position: absolute;
			color: #ff5757;
		  }
		}
		.inputOut {
			flex: 1;
			width: 3rem;
			position: relative;
			.inputMask {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			  }
			  input{
				width: 100%;
				border: none;
				background: none;
				outline: none;
				position: relative;
				z-index: 1;
			  }
		}
		.inputValue{
			flex: 1;
			width: 100rpx;
		}
		.icon-gouxuan1,.icon-xiala{
			color: #3f55cc;
		}
	}
	.sureBtn{
		width: 100%;
		padding: 25rpx 0;
		text-align: center;
		background-image: linear-gradient(to right bottom,#a3bffe,#3f55cc);
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		margin-top: 40rpx;
	}
}
.pointsMask{
	padding: 30rpx 4%;
	box-sizing: border-box;
	.poinsImg{
		display: flex;
		justify-content: center;
		width: 100%;
		image{
			width: 200rpx;
			border-radius: 10rpx;
		}
	}
	.poinsName{
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}
	.poinsNum{
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ff5757;
		font-size: 24rpx;
		.iconfont{
			margin-right: 6rpx;
		}
	}
	.maskTitle{
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.weitText{
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.maskAddress{
		display: flex;
		margin-top: 20rpx;
		align-items: center;
		justify-content: space-between;
	}
}
</style>
